<template>
	<div class="addCargo">
		<ComPop v-model="show" width="600px" title="新增货物" @saveSubmit="save">
			<el-form :model="form" :rules="rules" ref="formRef" label-width="100px">
				<el-form-item label="货物名称" prop="name">
					<el-input v-model="form.name" placeholder="请输入货物名称" />
				</el-form-item>
				<el-form-item label="单位" prop="unit">
					<el-select v-model="form.unit" placeholder="请选择单位">
						<el-option label="吨" value="吨"></el-option>
					</el-select>
				</el-form-item>
			</el-form>
		</ComPop>
	</div>
</template>

<script setup lang="ts">
const show = ref(false);
const formRef = ref();
const form = reactive({
	name: '',
	unit: '',
});
const rules = {
	name: [{ required: true, message: '请输入货物名称', trigger: 'blur' }],
	unit: [{ required: true, message: '请选择单位', trigger: 'blur' }],
};
function save() {
	formRef.value.validate((valid: boolean) => {
		if (valid) {
			show.value = false;
		}
	});
}
function open() {
	show.value = true;
}
defineExpose({ open });
</script>

<style lang="scss" scoped></style>
